import React from 'react';

import {WeaUpload,WeaBrowser,WeaHelpfulTip,WeaDialog,WeaLocaleProvider,WeaTools, WeaSearchGroup, WeaFormItem,WeaInput,WeaNewScroll,WeaSelectGroup,WeaTable,WeaInputNumber,WeaColorPicker,WeaSelect,WeaCheckbox} from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel;
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';
import './style/';
import {Tabs, Button, Spin, Icon, message, Modal,Row,Col} from 'antd';
const TabPane = Tabs.TabPane;
class Setting extends React.Component{

    state={
        selectedRowKeys:[],
        deleteIds:[],
        orderIds:[]

    }

    load = (id)=>{
        WeaTools.callApi('/api/portal/newEmployee/saveOrGetEmployeeById', 'POST', {"json":JSON.stringify({id:id})}).then((result) => {
            if (result.status == true) {
                if(result.data != null){
                    this.props.setStateData({data:result.data})
                }
            }
        });
    }

    cancelAndReflush = ()=>{
        const id = this.props.state.data.id
        this.props.setStateData({
            settingVisiable : false
        })
        this.setState({
            selectedRowKeys:[],
            deleteIds:[],
            orderIds:[]
        })

        this.load(id)
    }

    onChange = (args)=>{
        let data = Object.assign({},this.props.state.data,args)
        this.props.setStateData({data})
    }

    updateSetting = () =>{
        const data  = this.props.state.data;
        let {deleteIds,orderIds} = this.state
        for(let i in deleteIds){
            for(let j in orderIds){
                if(deleteIds[i] == orderIds[j]){
                    orderIds.splice(j,1)
                    continue
                }
            }
        }
        WeaTools.callApi('/api/portal/newEmployee/updateNewEmployeeById', 'POST', {"json":JSON.stringify({id:data.id,title:data.title,showNumber:data.showNumber,speed:data.speed}),"deleteIds":JSON.stringify(deleteIds),"orderIds":JSON.stringify(orderIds)}).then((result) => {

            if (result.status == true) {
                this.props.setStateData({settingVisiable:false})
                this.setState({
                    selectedRowKeys:[],
                    deleteIds:[],
                    orderIds:[]
                })
                message.success(getLabel(83551, '保存成功！'), 3);
            }else{
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    synchronizedDeleteData = ()=>{
        const ids = this.state.selectedRowKeys
        let data = this.props.state.data
        let emps = data.emps;

        for(let i in ids){
            for(let j in emps){
                if(ids[i] == emps[j].employeeId){
                    emps.splice(j,1)
                    continue
                }
            }
        }
        this.props.setStateData({
            data:data
        })
    }

    deleteItems = ()=>{
        Modal.confirm({
            title:getLabel(15172, '系统提示'),
            content:getLabel(385625, '确定要删除选择的记录吗？'),
            onOk: ()=>{
                //同步删除数据
                this.synchronizedDeleteData()
                const selectedRowKeys = this.state.selectedRowKeys
                let deleteIds = this.state.deleteIds
                let temp = deleteIds.concat(selectedRowKeys)
                deleteIds = temp

                this.setState({
                    deleteIds:deleteIds,
                    selectedRowKeys:[]
                })
                /*  const ids = this.state.selectedRowKeys
                  const id = this.props.state.data.id
                  WeaTools.callApi('/api/portal/newEmployee/deleteAllOfIds', 'POST', {"json":JSON.stringify(ids)}).then((result) => {
                      if (result.status == true) {
                          this.setState({
                              selectedRowKeys:[]
                          })
                          this.load(id)
                          message.success(getLabel(83551, '保存成功！'), 3);
                      }else{
                          message.error(getLabel(84544, '保存失败！'), 3);
                      }
                  });*/
            },
            onCancel(){}
        })

    }

    drop = (data)=>{
        let orderIds = []
        for(let i in data){
            orderIds.push(data[i].key)
        }
        this.setState({
            orderIds:orderIds
        })
    }

    getCols = ()=>{
        let cols = [{
            title: '人员',
            dataIndex: 'name',
            key: 'name',
            width: "50%",
        },{
            title: getLabel(30585, '操作'),
            key: 'operation',
            width: "50%",
            render: (text, record) => (
                <span>
                    <input type="hidden" name="id" value={record.id}/>
                   <div>
                       <span className="esetting-dso-button" onClick={()=>{this.props.setStateData({'addVisiable':true,setId:record.key,})}}>{getLabel(	30747, '设置')}</span>
                   </div>
                </span>
            )
        }]
        return cols;
    }

    getData = ()=>{
        const emps  = this.props.state.data.emps;
        let data = []
        if(emps && emps.length>0){
          for(let i=0 ;i< emps.length ; i++){
              data.push({
                  key: emps[i].employeeId,
                  name:emps[i].name
              })
            }
        }
        return data
    }

    onSelectChange = (selectedRowKeys)=>{
        this.setState({
            selectedRowKeys:selectedRowKeys
        })


    }



    render (){
        const rowSelection = {
            selectedRowKeys : this.state.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: (record)=>{
                return {
                    disabled: false    // 配置无法勾选的列
                };
            }
        };
        return (
            <WeaDialog
                title="设置"
                visible={this.props.state.settingVisiable}
                iconBgcolor='#1a57a0'
                hasScroll={false}
                style={{width: 900,height : 500}}
                onCancel={()=>{this.cancelAndReflush()}}
            >
                <Spin spinning={false}>
                    <Tabs defaultActiveKey="1" className="portal-esetting-tabs" onChange={()=>{}}>
                        <TabPane tab={getLabel(33368, '内容')} key="1">
                            <WeaSearchGroup title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true} >
                                <div className="lr_managerSetting_style_base_div">
                                    <div style={{'margin-bottom':'10px'}}>
                                        <Row gutter={24} type="flex" justify="start" align="middle">
                                            <Col span={3}>标题 :</Col>
                                            <Col span={9}>
                                                <WeaInput
                                                    value={this.props.state.data.title}
                                                    onChange={value => {
                                                        this.onChange({title:value})
                                                    }}
                                                />
                                            </Col>
                                            <Col span={3}>显示条数 :</Col>
                                            <Col span={9}>
                                                <WeaInputNumber
                                                    value={this.props.state.data.showNumber}
                                                    onChange={value => {
                                                        this.onChange({showNumber:value})
                                                    }}
                                                >
                                                </WeaInputNumber>
                                            </Col>
                                        </Row>
                                    </div>
                                    <div style={{'margin-bottom':'10px'}}>
                                        <Row gutter={24} type="flex" justify="start" align="middle">
                                            <Col span={3}>滚动速度 :</Col>
                                            <Col span={9}>
                                                <WeaInputNumber
                                                    value={this.props.state.data.speed}
                                                    onChange={value => {
                                                        this.onChange({speed:value})
                                                    }}
                                                >
                                                </WeaInputNumber>
                                            </Col>

                                        </Row>
                                    </div>
                                </div>
                            </WeaSearchGroup>
                            <WeaSearchGroup title={getLabel(20885, '内容来源')} needTigger={true} showGroup={true} customComponent={
                                <div>
                                    <Button type="primary" className="portal-esetting-wsg-btn" onClick={()=>{this.props.setStateData({'addVisiable':true,setId:-1})}} >
                                        添加
                                    </Button>
                                    {
                                        this.state.selectedRowKeys.length >0
                                            ?  (
                                                <Button type={"primary"} className="lr_managerSetting_center_delete_button"  onClick={() => {this.deleteItems()}} >批量删除</Button>
                                            )
                                            :   (
                                                <Button type={"ghost"} className="lr_managerSetting_center_delete_button"  >批量删除</Button>
                                            )
                                    }
                                </div>


                            }>
                                    <WeaTable rowSelection={rowSelection} columns={this.getCols()} dataSource={this.getData()}  pagination={false} draggable={true} onDrop={this.drop} scroll={{ y: 165 }} />

                            </WeaSearchGroup>
                        </TabPane>
                    </Tabs>
                </Spin>
                <div className="portal-esetting-confirm lr_managerSetting_option_buttons_div" >
                    <Button type="primary" onClick={() => {this.updateSetting()}}>{getLabel(30986, '保存')}</Button>
                    <Button type="ghost"  style={{marginLeft: '10px'}} onClick={()=>{this.cancelAndReflush()}}>{getLabel(31129, '取消')}</Button>
                </div>
            </WeaDialog>
            )

    }

}
export default Setting